<!DOCTYPE html>
<html ng-app="sc_shop_app">

<head>
  <meta charset="utf-8">
  <title>订单结算</title>
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <link href="../nightly/css/ionic.css" rel="stylesheet">
  <link href="../css/main.css" rel="stylesheet">
  <link href="../js/alertifyjs/css/alertify.css" rel="stylesheet">
  <!--标准mui.css-->
  <link rel="stylesheet" href="../js/mui/css/mui.min.css">
  <!--App自定义的css-->
  <link rel="stylesheet" type="text/css" href="../js/mui/css/app.css" />

  <script src="../js/mui/js/mui.min.js"></script>
  <script src="../js/spin.js"></script>
  <script src="../js/utils/myUtil.js"></script>
  <script src="../js/allJs.js"></script>
  <style>
    .padding-content {
      top: 6em;
      padding-left: 0;
      padding-right: 0;
    }
    
    .summary-footer {
      height: 3.5em;
      border-top: 1px solid #ddd;
    }
    
    .has_footer {
      bottom: 3.5em;
    }
    
    ion-content>div {
      height: 100%;
    }
    
    .food-item {
      width: 100%;
      float: left;
      clear: both;
    }
    
    .food-item-left {
      width: 40%;
      float: left;
      clear: left;
    }
    
    .food-item-left img {
      width: 100%;
      display: block;
      height: 4em;
    }
    
    .food-item-right {
      width: 50%;
      float: right;
      clear: right;
    }
    
    .text {
      width: 100%;
      float: left;
      text-align: left;
    }
    
    .summary-left {
      margin-left: .5em;
      width: 100%;
      float: left;
      /*        line-height: 32px;*/
      text-align: left;
    }
    
    .summary-right {
      float: right;
      width: 20%;
    }
    
    .btn-change {
      min-width: 1.5em;
      min-height: 1.5em;
      line-height: normal;
    }
    
    .goods-list {
      width: 100%;
      float: left;
      background: white;
    }
    
    #BgDiv {
      background-color: #7A7676;
      position: absolute;
      z-index: 99;
      left: 0;
      top: 0;
      display: none;
      width: 100%;
      height: 1000px;
      opacity: 0.5;
      filter: alpha(opacity=50);
      -moz-opacity: 0.5;
    }
  </style>
</head>

<body id="order_goods">
  <div id="BgDiv"></div>
  <!--<ion-view ng-controller="ProductCtrl">-->
  <ion-view ng-controller="myOrderContr">
    <header class="mui-bar mui-bar-nav">
      <a class="order-goods-back mui-icon mui-icon-left-nav"></a>
      <h1 class="mui-title">订单结算</h1>
    </header>
    <ion-content class=" has_footer" style="background: #ddd;overflow-y: scroll;background-color: #EEEEF3 !important;top: 3em !important;height: 100%;">
      <!-- 收货地址栏 -->

      <ul ng-show="{{!hasAddress}}" class="mui-table-view add_address">
        <li class="mui-table-view-cell ">
          <a class="mui-navigate-right">请选择收货地址</a>
        </li>
      </ul>

      <ul ng-show="{{hasAddress}}" class="mui-table-view change_address">
        <li class="mui-table-view-cell ">
          <span style="color:#007aff" class="mui-icon mui-icon-contact"></span>&nbsp;<span ng-bind="address_info.username"></span>&nbsp;&nbsp;&nbsp;
          <span style="color:#007aff" class="mui-icon mui-icon-phone"></span>&nbsp;<span class="mui-navigate-right" ng-bind="address_info.tel"></span>
          <br>
          <span ng-bind="address_info.city + address_info.address_detail"></span>
        </li>
      </ul>


      <div class="goods-list">
        <ion-list>
          <ion-item>
            <ul class="mui-table-view">
              <li class="mui-table-view-cell mui-media" ng-repeat="item in add_goods">
                <a href="javascript:;">
                  <img class="mui-media-object mui-pull-left" src="{{IMAGE_IP}}/api{{item.picture1}}">
                  <div class="mui-media-body">
                    {{item.name}}
                    <p class='mui-ellipsis'>× <span ng-bind="item['add_num']"></span></p>
                  </div>
                </a>
                <span style="background-color:#fff !important;color: #e42112;" class="mui-badge">￥{{item.goodsPrice}}</span>
              </li>
            </ul>


          </ion-item>
        </ion-list>
      </div>

      <ul class="mui-table-view ">
        <li class="mui-table-view-cell ">
          <a href="#payType" class="mui-navigate-right">支付方式</a>
        </li>
      </ul>

      <ul class="mui-table-view ">
        <li class="mui-table-view-cell ">
          <a class="mui-navigate-right">发票信息</a>
        </li>
      </ul>


      <ul class="mui-table-view ">
        <li class="mui-table-view-cell">商品金额:<span style="background-color:#fff !important;" class="mui-badge">￥{{goods_sum}}</span></li>

      </ul>

      <ul class="mui-table-view ">
        <li class="mui-table-view-cell">运费:<span style="background-color:#fff !important;" class="mui-badge">+￥0</span></li>
      </ul>

    </ion-content>

    <div class="bar bar-footer" style="border-top: 1px solid #dddddd;padding:0 !important;">

      <div class="total_num">
        <span>应付金额：<span style="color:#FFB54E">￥{{goods_sum}}</span></span>
      </div>

      <div class="submit_bt">
        <button class="button button-balanced " style="font-size:1.5em;margin-top:0.2em;background-color:#29b6f6;float: right;" ng-click="commitData()">
          提交订单
        </button>
      </div>
    </div>

  </ion-view>
  <div id="payType" class="mui-popover mui-popover-action mui-popover-bottom">
    <ul class="mui-table-view" style="border-radius:7px !important">
      <li class="mui-table-view-cell">
        <a href="#payType">
          <img class="mui-media-object mui-pull-left" src="../img/icon/alipay.png">
          <div class="mui-media-body" style="text-align: left;padding-top: .5em;">
            支付宝支付
            <p class="mui-ellipsis"></p>
          </div>
        </a>

      </li>
      <li class="mui-table-view-cell">
        <a href="#payType">
          <img class="mui-media-object mui-pull-left" src="../img/icon/wechatpay.png">
          <div class="mui-media-body" style="text-align: left;padding-top: .5em;">
            微信支付
            <p class="mui-ellipsis"></p>
          </div>
        </a>
      </li>
    </ul>
  </div>

</body>

</html>